<template>
  <a-flex vertical :gap="small">
    <Sender
      :loading="loading"
      :value="value"
      @change="handleChange"
      @submit="handleSubmit"
      @cancel="handleCancel"
    />
    <Sender value="Force as loading" :loading="true" readonly />
    <Sender disabled value="Set to disabled" />
  </a-flex>
</template>

<script setup name="BubbleSenderBasic">
import { ref, watch } from 'vue'
import { App, Flex } from 'ant-design-vue'
import { Sender } from 'ant-design-x-vue'

const value = ref('Hello? this is X!')
const loading = ref(false)
const { message } = App.useApp()

// Mock send message
watch(loading, () => {
  if (loading.value) {
    const timer = setTimeout(() => {
      loading.value = false
      message.success('Send message successfully!')
    }, 3000)

    return () => {
      clearTimeout(timer)
    }
  }
})

const handleChange = (v) => {
  value.value = v
}

const handleSubmit = () => {
  value.value = ''
  loading.value = true
  message.info('Send message!')
}

const handleCancel = () => {
  loading.value = false
  message.error('Cancel sending!')
}
</script>